<!--
 * @Author: your name
 * @Date: 2021-03-29 08:57:23
 * @LastEditTime: 2021-04-23 17:38:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \active-front\src\components\info.vue
-->
<template>
  <el-container style="margin: 0 50px">
    <!-- 顶部logo 以及用户 -->
    <el-header
      class="header-user"
      style="background-image: url('../assets/one.jpg')"
    >
      <el-avatar
        shape="square"
        :size="100"
        :src="require('../assets/logo.png')"
        style="background: #66b1ff"
      >
      </el-avatar>
      <div class="header-user-right">
        <el-dropdown @command="newDetail">
          <el-badge
            :value="maxNews === 0 ? null : maxNews"
            :max="99"
            style="margin-right: 10px; margin-top: 10px; margin-right: 40px"
          >
            <i class="el-icon-bell"></i>
          </el-badge>

          <el-dropdown-menu slot="dropdown">
            <div v-if="roleid">
              <el-dropdown-item
                v-for="item in news"
                :key="item.num"
                :command="item"
              >
                报名人数
                <el-badge
                  :value="item.num"
                  :max="99"
                  style="margin-right: 10px; margin-top: 10px"
                >
                </el-badge>
              </el-dropdown-item>
            </div>
            <div v-else>
              <el-dropdown-item
                v-for="item in news"
                :key="item.num"
                split-button
              >
                {{ item.state === 1 ? "报名成功" : "报名失败" }}
                <el-badge
                  :value="item.num"
                  :max="99"
                  style="margin-right: 10px; margin-top: 10px"
                >
                </el-badge
              ></el-dropdown-item>
            </div>
          </el-dropdown-menu>
        </el-dropdown>

        <div>
          <el-avatar shape="square" :size="40" :src="ImgUrl"> </el-avatar>
        </div>
        <el-dropdown>
          <el-card shadow="hover" style="border: none">
            <div style="padding: 0 10px 10px; color: #909399" class="user">
              <span class="el-dropdown-link">
                <span>{{ user.name }}</span>
                <p>{{ user.code }}</p>
              </span>
              <!-- 用户信息弹出层 -->
              <el-dropdown-menu slot="dropdown">
                <div @click="personal">
                  <el-dropdown-item icon="el-icon-plus">
                    个人信息
                  </el-dropdown-item>
                </div>
                <div @click="Out">
                  <el-dropdown-item icon="el-icon-circle-plus">
                    退出
                  </el-dropdown-item>
                </div>
              </el-dropdown-menu>
            </div>
          </el-card>
        </el-dropdown>
      </div>
    </el-header>
    <!-- 导航栏 -->
    <div class="img1 note" :style="note" />
    <el-header style="position: relative">
      <!-- active-text-color="#ffd04b"
        background-color="#63B8FF" -->
      <el-menu
        :default-active="this.activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        style="background-image: url('../assets/one.jpg')"
      >
        <el-menu-item index="/info/home">
          <router-link to="/info/home">
            <a-icon type="home" /> <span>首页</span>
          </router-link>
        </el-menu-item>

        <el-submenu index="/info/seacher">
          <template slot="title">
            <a-icon type="code-sandbox" /><span>活动中心</span>
          </template>
          <el-submenu index="shiyige">
            <template slot="title">十个一</template>
            <el-menu-item index="8">川师大讲堂</el-menu-item>
            <el-menu-item index="22">讲座</el-menu-item>
            <el-menu-item index="2">十个一学时</el-menu-item>
            <el-menu-item index="1">十个一量化</el-menu-item>
            <el-menu-item index="18">红色精神</el-menu-item>
            <el-menu-item index="13">创新创业学分</el-menu-item>
          </el-submenu>
          <el-menu-item index="3">考研</el-menu-item>
          <el-submenu index="2-3">
            <template slot="title">主题活动</template>
            <el-menu-item index="19">心理服务</el-menu-item>
            <el-menu-item index="16">艺术活动</el-menu-item>
            <el-menu-item index="4">部门主题活动</el-menu-item>
            <el-menu-item index="11">文化展示</el-menu-item>
            <el-menu-item index="20">奖金/奖品</el-menu-item>
            <el-menu-item index="23">体育活动</el-menu-item>
          </el-submenu>
          <el-submenu index="saishi">
            <template slot="title">赛事</template>
            <el-submenu index="100">
              <template slot="title">大型赛事</template>
              <el-menu-item index="6">互联网+大赛</el-menu-item>
              <el-menu-item index="5">挑战杯</el-menu-item>
              <el-menu-item index="9">ACM</el-menu-item>
              <el-menu-item index="10">蓝桥杯</el-menu-item>
              <el-menu-item index="14">华迪杯</el-menu-item>
            </el-submenu>
            <el-menu-item index="17">演讲比赛</el-menu-item>
            <el-submenu index="2-5">
              <template slot="title">专业竞赛</template>
              <el-menu-item index="15">英语竞赛</el-menu-item>
              <el-menu-item index="7">数学禁赛</el-menu-item>
              <el-menu-item index="24">物理竞赛</el-menu-item>
              <el-menu-item index="25">职业技能</el-menu-item>
              <el-menu-item index="21">教师技能大赛</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="12">志愿活动</el-menu-item>
        </el-submenu>

        <el-menu-item index="/info/activity">
          <a-icon type="carry-out" /> <span>活动报名</span>
        </el-menu-item>

        <el-menu-item index="/info/map">
          <i class="el-icon-map-location"></i>
          <span>地图</span>
        </el-menu-item>
        <!--        测试选项-->
        <!--        <el-submenu index="5">-->
        <!--          <template slot="title">-->
        <!--            <a-icon type="appstore" /> <span>Layout</span>-->
        <!--          </template>-->
        <!--          <el-menu-item index="5-1">选项1</el-menu-item>-->
        <!--          <el-menu-item index="5-2">选项2</el-menu-item>-->
        <!--          <el-menu-item index="5-3">选项3</el-menu-item>-->
        <!--        </el-submenu>-->
        <el-menu-item index="/info/personal">
          <a-icon type="book" /><span>个人中心</span>
        </el-menu-item>
      </el-menu>
      <div class="roleid" v-if="roleid">
        <el-button icon="el-icon-plus" style="color: #66b1ff" @click="Newact">
          新建活动
        </el-button>
        <!-- //新建活动弹窗 -->
        <div id="newAct" v-show="this.role">
          <el-dialog title="新增活动" :visible.sync="dialogFormVisible" center>
            <el-form
              :model="form"
              label-position="top"
              :rules="rules"
              ref="form"
            >
              <el-form-item
                label="活动名称"
                :label-width="formLabelWidth"
                prop="name"
              >
                <el-input
                  v-model="form.name"
                  autocomplete="off"
                  placeholder="请输入活动名称"
                ></el-input>
              </el-form-item>

              <el-form-item
                label="主办部门"
                :label-width="formLabelWidth"
                prop="deptId"
              >
                <el-select
                  v-model="form.deptId"
                  placeholder="请选择部门"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in optionsDeptId"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item
                    label="活动开始日期"
                    :label-width="formLabelWidth"
                    prop="createDate"
                  >
                    <el-date-picker
                      v-model="form.createDate"
                      type="datetime"
                      style="width: 100%; padding-left: 40px; font-size: 26px"
                      placeholder="选择日期时间"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label="活动截至日期"
                    prop="deadline"
                    :label-width="formLabelWidth"
                  >
                    <el-date-picker
                      style="width: 100%; padding-left: 40px; font-size: 26px"
                      v-model="form.deadline"
                      type="datetime"
                      placeholder="选择日期时间"
                      value-format="yyyy-MM-dd HH:mm:ss"
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item
                label="面向对象"
                :label-width="formLabelWidth"
                prop="scope"
              >
                <el-radio-group v-model="form.scope">
                  <el-radio :label="2" style="font-size: 26px">校内</el-radio>
                  <el-radio :label="1" style="font-size: 26px">院内</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="选择活动主办学院"
                :label-width="formLabelWidth"
                prop="collegeId"
              >
                <el-cascader
                  style="width: 100%"
                  :options="options"
                  v-model="form.collegeId"
                  placeholder="请选择"
                  clearable
                ></el-cascader>
              </el-form-item>
              <el-form-item
                label="选择Tag"
                :label-width="formLabelWidth"
                prop="tagId"
              >
                <el-checkbox-group v-model="form.tagId" :max="3">
                  <el-checkbox
                    v-for="city in tags"
                    :label="city.id"
                    :key="city.name"
                  >
                    {{ city.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item
                label="活动人数"
                :label-width="formLabelWidth"
                prop="number"
              >
                <el-input
                  v-model="form.number"
                  placeholder="请输入内容"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="活动地址"
                :label-width="formLabelWidth"
                prop="address"
              >
                <el-input
                  v-model="form.address"
                  autocomplete="off"
                  placeholder="请输入活动地址"
                ></el-input>
              </el-form-item>
              <el-form-item label="上传文件" :label-width="formLabelWidth">
                <el-upload
                  class="upload-demo"
                  action="none"
                  :auto-upload="false"
                  multiple
                  :limit="3"
                  :on-change="uploadFile"
                  :on-exceed="handleExceed"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div slot="tip" class="el-upload__tip">文件大小不超过2MB</div>
                </el-upload>
              </el-form-item>
              <el-form-item
                label="详情"
                :label-width="formLabelWidth"
                prop="detail"
              >
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  placeholder="请输入内容"
                  style="font-size: 26px"
                  v-model="form.detail"
                >
                </el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button
                @click="dialogFormVisible = false"
                style="margin-right: 40px"
                >取 消</el-button
              >
              <el-button
                type="primary"
                @click="addAct('form')"
                style="margin-left: 40px"
              >
                确 定
              </el-button>
            </div>
          </el-dialog>
        </div>
      </div>
    </el-header>
    <el-main><router-view /></el-main>
  </el-container>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import actApi from "../api/HotEvent";
// import activeApi from "../api/HotEvent";
import userApi from "../api/user";
function objToFd(obj, form, name) {
  const fd = form || new FormData();

  if (typeof obj !== "object" || obj instanceof File) {
    fd.append(name, obj);
    return fd;
  }

  const keyName = name ? name + "." : "";

  for (const prop in obj) {
    // 判断是自己的属性 且不为空
    if (
      prop != null &&
      obj.hasOwnProperty(prop) &&
      obj[prop] != null &&
      obj[prop] !== ""
    ) {
      const val = obj[prop];
      if (val instanceof Array) {
        // 如果是数组
        let that = this;
        val.map((item, index) => {
          objToFd(item, fd, keyName + prop + "[" + index + "]");
        });
      } else {
        objToFd(val, fd, keyName + prop);
      }
    }
  }

  return fd;
}
export default {
  data() {
    var checkNumber = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("人数不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value - 0)) {
          callback(new Error("请输入数字值"));
        } else {
          callback();
        }
      }, 1000);
    };
    return {
      note: {
        backgroundImage: "url(" + require("../assets/one.jpg") + ") ",
        backgroundPosition: "center center",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover"
      },
      value: [],
      role: false,
      user: {},
      roleid: false,
      dialogFormVisible: false,
      rules: {
        detail: [
          { required: true, message: "请输入活动详情", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入活动地址", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        number: [{ required: true, validator: checkNumber, trigger: "blur" }],
        deptId: [
          { required: true, message: "请选择主办部门", trigger: "change" }
        ],
        scope: [
          { required: true, message: "请选择面向对象", trigger: "change" }
        ],
        collegeId: [
          { required: true, message: "请选择主办学院", trigger: "change" }
        ],
        createDate: [
          {
            required: true,
            message: "请选择活动开始日期",
            trigger: "change"
          }
        ],
        deadline: [
          {
            required: true,
            message: "请选择活动截至日期",
            trigger: "change"
          }
        ],
        tagId: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      },
      form: {
        name: "",
        createDate: "",
        deadline: "",
        deptId: "", //主板部门
        detail: "",
        collegeId: "", //学院id吧? 是学院id
        tagId: [],
        number: "",
        address: "",
        files: [],
        scope: 1 //院级返回1，校返回2
      },
      //学院列表
      options: [
        {
          value: 1,
          label: "成龙校区",
          children: [
            {
              label: "计算机科学学院",
              value: 1
            },
            {
              label: "商学院",
              value: 3
            },
            {
              label: "外语学院",
              value: 4
            },
            { label: "物理与电子工程学院", value: 10 },
            { label: "生命科学学院", value: 11 },
            { label: "化学与材料科学学院", value: 12 },
            { label: "地理与资源科学学院", value: 13 },
            { label: "经济与管理学院", value: 14 },
            { label: "音乐学院", value: 15 },
            { label: "舞蹈学院", value: 16 },
            { label: "服装与设计艺术学院", value: 17 },
            { label: "体育学院", value: 19 },
            { label: "工学院", value: 20 }
          ]
        },
        {
          value: 2,
          label: "狮山校区",
          children: [
            { label: "数学与软件科学学院", value: 2 },
            { label: "文学院", value: 5 },
            { label: "心理学院", value: 6 },
            { label: "马克思主义学院", value: 7 },
            { label: "教育科学学院", value: 8 },
            { label: "历史文化与旅游学院", value: 9 },
            { label: "影视与传媒学院", value: 18 },
            { label: "基础教育学院", value: 21 },
            { label: "校团委", value: 22 }
          ]
        }
      ],
      //部门
      optionsDeptId: [
        { value: 1, label: "宣调部" },
        { value: 2, label: "女生部" },
        { value: 3, label: "双创部" },
        { value: 4, label: "组建部" },
        { value: 5, label: "办公室" },
        { value: 6, label: "学习部" },
        { value: 7, label: "纪检部" },
        { value: 8, label: "主席团" },
        { value: 9, label: "劳动部" },
        { value: 10, label: "社团部" },
        { value: 11, label: "社志部" },
        { value: 12, label: "素美部" },
        { value: 13, label: "网联部" },
        { value: 14, label: "体育部" },
        { value: 15, label: "心理部" },
        { value: 16, label: "党委学生工作部（处）武装部" }
      ],
      //tag列表
      tags: [
        {
          id: 1,
          name: "十个一量化"
        },
        {
          id: 2,
          name: "十个一学时"
        },
        {
          id: 3,
          name: "考研"
        },
        {
          id: 4,
          name: "部门主题活动"
        },
        {
          id: 5,
          name: "挑战杯"
        },
        {
          id: 6,
          name: "互联网+大赛"
        },
        {
          id: 7,
          name: "数学竞赛"
        },
        {
          id: 8,
          name: "川师大讲堂"
        },
        {
          id: 9,
          name: "ACM"
        },
        {
          id: 10,
          name: "蓝桥杯"
        },
        {
          id: 11,
          name: "文化展示"
        },
        {
          id: 12,
          name: "志愿者活动"
        },
        {
          id: 13,
          name: "创新创业学分"
        },
        {
          id: 14,
          name: "华迪杯"
        },
        {
          id: 15,
          name: "英语竞赛"
        },
        {
          id: 16,
          name: "艺术活动"
        },
        {
          id: 17,
          name: "演讲比赛"
        },
        {
          id: 18,
          name: "红色精神"
        },
        {
          id: 19,
          name: "心理服务"
        },
        {
          id: 20,
          name: "奖金/奖品"
        },
        {
          id: 21,
          name: "教师技能大赛"
        },
        {
          id: 22,
          name: "讲座"
        },
        {
          id: 23,
          name: "体育活动"
        },
        {
          id: 24,
          name: "物理竞赛"
        },
        {
          id: 25,
          name: "职业技能"
        }
      ],
      formLabelWidth: "120px",
      squareUrl:
        "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png"
    };
  },
  computed: {
    ...mapState(["activeIndex", "ImgUrl", "news", "maxNews"])
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(keyPath, key);
      if (keyPath.length > 1) {
        this.$router.push(keyPath[0] + "/" + key);
        // location.reload();
        return;
      }
      this.$router.push(key);
    },
    Newact() {
      this.dialogFormVisible = true;
    },
    personal() {
      this.$router.push("/info/personal/information");
    },
    newDetail(command) {
      this.$router.push("/info/newsDetail");
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      );
    },
    //上传文件
    uploadFile(file, fileList) {
      let arr = [];
      fileList.map(item => {
        arr.push(item.raw);
      });
      this.form.files = arr;
    },
    async addAct(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          this.form.number = this.form.number - 0;
          this.form.collegeId = this.form.collegeId[1];
          let fd = objToFd(this.form);
          for (let i = 0; i < this.form.files.length; i++) {
            fd.append("files", this.form.files[i]);
          }
          const data = await actApi.releaseActive(fd);
          if (!data.code) {
            this.dialogFormVisible = false;
            this.$refs[formName].resetFields();
            this.$message({
              showClose: true,
              message: "活动新增成功",
              type: "success"
            });
          } else {
            this.$message({
              showClose: true,
              message: "错了哦！别问就是错了",
              type: "error"
            });
          }
          console.log(data);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 退出方法
    async Out() {
      const data = await userApi.userlogout();
      // console.log(data);
      if (data.code === 0) {
        this.$message({
          message: "注销成功",
          type: "warning"
        });
        this.$router.push("/");
      } else {
        alert("注销失败");
      }
    },
    ...mapMutations(["UpdateImgUrl"])
  },
  mounted() {
    // document
    //   .querySelector("body")
    //   .setAttribute("style", "background-color:#D1EEEE");
    const sy = JSON.parse(localStorage.getItem("sy"));
    if (sy.roleId < 3) this.roleid = true;
    this.UpdateImgUrl(sy.iconPath);
    this.user = sy;
    // 判断是否显示新增活动
    if (this.user.roleId < 3) {
      this.role = true;
    }
    console.log(sy.iconPath);
  },
  beforeDestroy() {
    // document.querySelector("body").removeAttribute("style");
  }
};
</script>
<style scoped>
.el-container {
  margin: 0 100px;
}
a {
  text-decoration: none;
}
p {
  margin: 0;
}
.header-user {
  /* width: 100%; */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-user-right {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.el-icon-bell {
  font-size: 26px;
}
.el-dropdown-link {
  cursor: pointer;
}

.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
.el-card__body {
  padding: 0;
}
.roleid {
  position: absolute;
  right: 2%;
  top: 30%;
}
#newAct .el-form-item__label {
  font-size: 26px;
}
#newAct .el-dialog__body {
  font-size: 26px;
  padding: 0 100px;
}
#newAct .el-radio__label {
  font-size: 26px;
}
#newAct .el-input__inner {
  font-size: 26px;
}
#newAct .el-radio__inner {
  width: 26px;
  height: 26px;
}

#newAct .el-dialog__title {
  font-size: 26px;
  font-weight: 600;
}
#newAct .el-dialog__header {
  padding-top: 60px;
}
#newAct .el-radio__inner::after {
  width: 10px;
  height: 10px;
}
</style>
